/* eslint-disable eqeqeq */
/**
 * 产品+组合 业务组件 树形结构
 * by zhangxinyue
 * create 2021-07-29
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '@/src/components/form/formPub.js';
import Comp from './comp';

class ProductGroupTreeC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '组合',
    placeholder: '请选择组合',
    helper: '',
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    maxTagCount: 0,
    productId: undefined, // 默认无产品ID，获取所有产品下的组合
    ralation: false, // 默认单独展示，无关联关系
    rules: undefined, // 默认无校验规则
    multiple: true, // 默认支持多选
    formItemLayout: FormItemLayout, // 设置form表单布局默认值
    allowClear: true, // 默认可删除
    authority: 'read', // 默认是读权限
    disabled: false, // 默认不禁用
    treeCheckable: false, // 默认不显示
    maatApi: false, // 默认什么环境下就用什么该环境的组合
    labalWrap: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      tooltipInfo: '', // 提示语
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value, type) => {
    // type 是否抛给父组件 默认是
    this.state.comp.setSelect(value);
    // 响应变更事件
    if (!type) {
      this.onChange(value);
    }
  };

  // 选中树节点变更事件
  onChange = (e) => {
    if (e == undefined || e.length == 0) {
      this.props.onChange(undefined);
      return;
    }
    // 获取变更抛出的数据
    const args = this.state.comp.setOnChangeInfo(e);
    this.props.onChange(args);
  };

  render() {
    const { title, dataIndex, initialValue, helper, rules, formItemLayout, toolTipPlace, multiple } = this.props;
    return (
      <Tooltip title={this.state.tooltipInfo} placement={toolTipPlace == undefined ? (multiple == true ? 'right' : 'top') : toolTipPlace}>
        <Form.Item
          name={dataIndex}
          initialValue={initialValue}
          rules={rules ? rules : []}
          colon={false}
          labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
          wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
          label={
            title ? (
              helper ? (
                <span>
                  {title}&nbsp;
                  <Tooltip title={helper}>
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              ) : (
                <span>{title}</span>
              )
            ) : undefined
          }
        >
          <Comp
            {...this.props}
            // eslint-disable-next-line react/jsx-handler-names
            onChange={this.onChange}
            onRef={(ref) => this.setState({ comp: ref })}
            onChangeTip={(tooltipInfo) => {
              this.setState({
                tooltipInfo,
              });
            }}
          />
        </Form.Item>
      </Tooltip>
    );
  }
}

// props类型
ProductGroupTreeC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.oneOfType([
    // 初始默认值
    PropTypes.string, // 单选模式
    PropTypes.array, // 多选模式
  ]),
  rules: PropTypes.object, // 校验规则
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  maxTagCount: PropTypes.number,
  productId: PropTypes.string, // 产品ID（在ralation为true时，设置productId生效）
  ralation: PropTypes.bool, // 设置是否与产品有关联关系
  multiple: PropTypes.bool, // 是否支持多选
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  authority: PropTypes.oneOf(['read', 'write']), // 设置权限类型
  disabled: PropTypes.bool, // 是否禁用
  treeCheckable: PropTypes.bool, // 是否显示checkbox
  maatApi: PropTypes.bool, // 正常情况下，在哪个环境下，就访问哪个环境的组合，
  // 但在投资建议书模块中，被引用到资管环境时，该组件的接口仍然要访问maat环境中的组合（而不是资管环境中组合），此时需要在接口前添加maat前缀
  positionBody: PropTypes.bool, // 下拉框是否跟随滚动 默认跟随
  inveType: PropTypes.string, // 投资类型 "0","固定收益类" ,"1": "权益类" ,"2":"商品及金融衍生品类", "3": "混合类"
  tradeModel: PropTypes.array, // 交易模式  BOOKKEEPING_MODE: "簿记模式"，  COMMAND_MODE: "指令模式"，VALUATION_BOOKKEEPING_MODEL: "估值系统对接模式"，VALUATION_TABLE_ANALYSIS_MODE: "估值表解析模式"
};

export default connect(({ productAGroupM, loading }) => ({ productAGroupM, loading }))(ProductGroupTreeC);
